<template>
	<view class="container">
		<view style="width: 100%;height: 20rpx;"></view>
		<view class="list_view">
			<u-checkbox-group :wrap="true" @change="checkboxGroupChange">
				<u-checkbox class="checkbox_view" v-for="(item, index) in dataList" :key="index" active-color="#8BC245"
					shape="circle" v-model="item.checked" :name="item.deviceId" @change="checkboxChange">
					<view class="item_view Text77" style="margin-bottom: 10rpx;">
						<view class="left_view">
							{{ item.deviceName }}
						</view>
					</view>
					<view class="item_view Text88Nor">
						<view class="left_view">
							车站
						</view>
						<view class="right_view">
							{{ item.tenantName }}
						</view>
					</view>
					<view class="item_view Text88Nor">
						<view class="left_view">
							区域
						</view>
						<view class="right_view">
							{{ item.area }}
						</view>
					</view>
					<view class="item_view Text88Nor">
						<view class="left_view">
							安装位置
						</view>
						<view class="right_view">
							{{ item.location }}
						</view>
					</view>
					<view class="item_view Text88Nor">
						<view class="left_view">
							状态
						</view>
						<view class="right_view">
							{{ deviceStatusEnum(item.status) }}
						</view>
					</view>
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="bottom_view">
			<view class="next_view" @click="nextAction">
				下一步
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				dataList: [],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 'orange',
				deviceIdList: []
			}
		},
		created() {
			this.getUnAuthorizeDevicesData()
		},
		methods: {
			deviceStatusEnum(e) {
				switch (e) {
					case 1:
						return '在线'
					case 2:
						return '离线'
					default:
						break
				}
			},
			nextAction() {
				// let applyArray = this.dataList.filter(item => this.seletedList.includes(item.deviceId));
				this.$Router.push({
					name: 'authTime',
					params: {
						deviceIdList: this.deviceIdList,
						deviceType: 'DOOR'
					}
				})
			},
			checkboxChange(e) {
				this.dataList.forEach(item => {
					if (e.name === item.deviceId) {
						this.$set(item, 'checked', e.value);
					}
				})
				this.$forceUpdate()
			},
			checkboxGroupChange(e) {
				this.deviceIdList = e;
			},
			getUnAuthorizeDevicesData() {
				var that = this
				let sUserInfo = this.$storage.getStorageDataSync("sUserInfo")
				this.$apis.getUnAuthorizeDevices(sUserInfo.tenantId).then(result => {
					if (result.res.data.code == '200') {
						that.dataList = result.res.data.data
						that.dataList.forEach(item => {
							item.checked = false
						})
					} else {
						this.$show.toastMessage(result.res.data.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #F8F8F8;
	}

	.list_view {
		padding: 20rpx;
		padding-bottom: 120rpx;

		.checkbox_view {
			padding: 30rpx;
			margin-bottom: 10px;
			background-color: #FFFFFF;
			border-radius: 10rpx;
		}

		.item_view {
			width: 80vw;
			margin-left: 2vw;
			display: flex;
			flex-shrink: 1;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.right_view {
				max-width: 70%;
				word-break: break-all;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}

	.bottom_view {
		width: 100%;
		height: 120rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;

		.next_view {
			width: 90%;
			height: 80rpx;
			background-color: #324DEC;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
			border-radius: 40rpx;
		}
	}
</style>